<template>
    <div>
      <el-button type="primary" @click="createCustomer">新建客户</el-button>
      <el-button type="warning" :disabled="!selectedRow" @click="editCustomer">编辑</el-button>
      <el-dropdown @command="handleBatchAction">
        <el-button type="success">
          批量操作<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="delete">批量删除</el-dropdown-item>
          <el-dropdown-item command="export">批量导出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
  
      <el-table 
        :data="tableData" 
        border 
        style="width: 100%;" 
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="customerId" label="客户编号" width="120"></el-table-column>
        <el-table-column prop="customerName" label="客户名称" width="120"></el-table-column>
        <el-table-column prop="customerType" label="客户类型" width="120">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.customerType }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="customerLevel" label="客户级别" width="120">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.customerLevel }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="contact" label="联系人" width="100"></el-table-column>
        <el-table-column prop="phone" label="电话" width="150"></el-table-column>
        <el-table-column prop="salesPerson" label="业务员" width="100"></el-table-column>
        <el-table-column prop="address" label="客户地址" width="200"></el-table-column>
        <el-table-column prop="remarks" label="备注" width="150"></el-table-column>
      </el-table>
  
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { getCustomerList } from '@/api/main/customer';
  import { createCustomer, updateCustomer, deleteCustomer } from '@/api/main/customer';
  
  export default {
    data() {
      return {
        tableData: [],
        selectedRow: null,
        currentPage: 1,
        pageSize: 10,
        total: 0
      };
    },
    created() {
      this.fetchTableData();
    },
    methods: {
      async fetchTableData() {
        try {
          const response = await getCustomerList({
            page: this.currentPage,
            size: this.pageSize
          });
          this.tableData = response.data.records;
          this.total = response.data.total;
        } catch (error) {
          console.error('Failed to fetch customer data:', error);
        }
      },
      createCustomer() {
        console.log("创建客户");
      },
      editCustomer() {
        console.log("编辑客户", this.selectedRow);
      },
      handleBatchAction(command) {
        console.log("批量操作", command);
      },
      handleSelectionChange(selection) {
        this.selectedRow = selection[0];
      },
      handleSizeChange(size) {
        this.pageSize = size;
        this.fetchTableData();
      },
      handleCurrentChange(page) {
        this.currentPage = page;
        this.fetchTableData();
      }
    }
  };
  </script>
  
  <style scoped>
  .el-button {
    margin-right: 10px;
  }
  </style>
  